<template>
	<view class="issue_page">
		<div class="answer">
			<div>
				<!-- <button>提示</button> -->
				<button style="background-color: #ff8e97;" @click='unknown'>不知道</button>
			</div>
			<input type="text" v-model.trim="value" class="input" placeholder="请输入答案">
			<div>
				<button style="background-color: #93b5cf;" @click="submit">确定</button>
			</div>
		</div>
		<scroll-view class="question" scroll-y>
			<div style="text-align: center;"><h2>{{filterCn(showWord.chinese)}}</h2></div>
			<div style="text-align: center;"><h2>{{filterEn(showWord.english)}}</h2></div>
			<div>例句1：<span>{{filterCn(showWord.c1)}}</span></div>
			<div>Example1：<span>{{filterEn(showWord.e1)}}</span></div>
			<div>例句2：<span>{{filterCn(showWord.c2)}}</span></div>
			<div>Example2：<span>{{filterEn(showWord.e2)}}</span></div>
			<div>例句3：<span>{{filterCn(showWord.c3)}}</span></div>
			<div>Example3：<span>{{filterEn(showWord.e3)}}</span></div>
		</scroll-view>
		<button type="default" @click="goBack">返 回</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curr: {},
				type: 0, // 问题类型  0==》回答英文   1==》回答中文  3=>展示答案
				index: 1, // 对应单词 1=>第一个单词  2=>第二个单词
				showWord: {},
				tip: false,
				value:''
			}
		},
		onShow () {
			this.getWord()
		},
		methods: {
			goBack () {
				uni.navigateBack()
			},
			// 确定
			submit () {
				let val = ''
				if (this.type == 0) {
					val = this.showWord.english
				}
				if (this.type == 1) {
					val = this.showWord.chinese
				}
				if (this.type == 3) {
					this.getWord()
					this.value = ''
					return
				}
				if (this.value == val) {
					this.value = ''
					uni.showToast({
					    title: '答对了！',
					    duration: 1000,
						icon: "success"
					});
					this.type = 3
					setTimeout(() => {
						this.getWord()
					}, 2000)
				} else {
					uni.showToast({
					    title: '答错了！',
					    duration: 1000,
						icon: "none"
					});
				}
			},
			// 不知道
			unknown () {
				if (this.type == 0) {
					this.value = this.showWord.english
				}
				if (this.type == 1) {
					this.value = this.showWord.chinese
				}
				this.type = 3
			},
			// 获取一个单词
			getWord () {
				try {
					let list = uni.getStorageSync('words')
					let curr = {}
					while(!curr.chinese || !curr.english1 || !curr.english2) {
						let n = Math.floor(Math.random() * list.length)
						curr = list[n]
					}
					this.curr = curr
					
					// 随机问题类型
					let num = Math.random() * 100
					this.type = 0 
					this.index = 1
					if (num < 25) {
						this.type = 0 
						this.index = 0
					} else if (num < 50) {
						this.type = 0
						this.index = 1
					} else if (num <75) {
						this.type = 1
						this.index = 0
					} else {
						this.type = 1
						this.index = 1
					}
					this.tranShow()
				} catch (e) {
				    console.log('获取缓存出错', e)
				}
			},
			// 转换显示的内容
			tranShow () {
				this.showWord = {
					chinese: this.curr.chinese,
					english: this.index == 1 ? this.curr.english1 :this.curr.english2,
					c1: this.index = 1 ? this.curr.eng1_eg1_cn : this.curr.eng2_eg1_cn,
					e1: this.index = 1 ? this.curr.eng1_eg1_en : this.curr.eng2_eg1_en,
					c2: this.index = 1 ? this.curr.eng1_eg2_cn : this.curr.eng2_eg2_cn,
					e2: this.index = 1 ? this.curr.eng1_eg2_en : this.curr.eng2_eg2_en,
					c3: this.index = 1 ? this.curr.eng1_eg3_cn : this.curr.eng2_eg3_cn,
					e3: this.index = 1 ? this.curr.eng1_eg3_en : this.curr.eng2_eg3_en
				}
			},
			filterEn (en) {
				if (this.type == 1 || this.type == 3) return en
				while (en.indexOf(this.showWord.english) > -1)  {
					en = en.replace(this.showWord.english, '__?__')
				}
				return en
			},
			filterCn (cn) {
				if (this.type == 0 || this.type == 3) return cn
				while (cn.indexOf(this.showWord.chinese) > -1)  {
					cn = cn.replace(this.showWord.chinese, '__?__')
				}
				return cn
			}
		}
	}
</script>

<style scoped>
	.issue_page {
		width:100%;
		height:100%;
		background-color: #222;
		overflow: hidden;
		position: relative;
		color: #ddd;
		font-size: 36rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
	}
	.answer {
		width:100%;
		height: 220rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.answer button {
		font-size: 32rpx;
		margin:20rpx 0;
		padding: 0rpx 20rpx;
	}
	.answer .input {
		width:40%;
		height:60rpx;
		margin: 0 40rpx;
		border-radius: 12rpx;
		line-height: 60rpx;
		font-size: 36rpx;
		text-align: center;
		background-color: #eee;
		color: #1661ab;
		box-sizing: border-box;
		padding:0 20rpx;
	}
	
	.question {
		width:100%;
		height:calc(100% - 350rpx);
		padding: 20rpx 40rpx;
		box-sizing: border-box;
	}
	.question div {
		margin-bottom:40rpx;
		font-size: 28rpx;
	}
	.question div:nth-child(even) {
		color: #93b5cf;
	}
	.question div:nth-child(odd) {
		color: #ff8e97
	}
	.question div span {
		font-size: 34rpx;
	}
</style>
